<style scoped lang="scss">
.tree-container {
    width: 290px;
    position: relative;

    .scale-btn {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .row {
        overflow: hidden;
        padding: 7px 8px;

        .col {
            width: 64px;
            height: 40px;
            background: #e0e9fd;
            color: #091940;
            border-radius: 5px;
            text-align: center;
            float: left;
            margin-right: 6px;
            font-size: 14px;
            line-height: 14px;
            display: flex;
            flex-direction: column;
            justify-content: center;

            &:nth-child(4n) {
                margin-right: 0px;
            }

            &:nth-child(n+5) {
                margin-top: 7px;
            }

            &.selected {
                background: #668FF5;
                color: #FEFEFE;
            }

            div:first-child {
                margin-bottom: 4px;
            }
        }
    }

    .el-tree {
        width: 290px;
    }

    .search-box {
        height: 38px;
        border: 1px solid #efefef;
        display: flex;
        align-items: center;
        padding-left: 8px;

        .search-input {
            width: 212px;
            height: 28px;
        }

        img {
            margin-left: 12px;
            cursor: pointer;
        }
    }

}

:deep(.el-tree-node__content) {
    .is-disabled {
        display: none;
    }

    .video {
        padding-left: 20px;
    }

}
</style>
<template>
    <div class="tree-container">
        <img class="scale-btn" :src="scaleBtn" />
        <div class="row">
            <div v-if="ConfigSetting.listCate.includes('全部车辆')" class="col " :class="{selected:queryParams.status == 1}" @click="switchStatus('全部车辆')">
                <div>全部</div>
                <div>{{ totalInfo.all }}</div>
            </div>
            <div v-if="ConfigSetting.listCate.includes('在线车辆')" class="col" :class="{selected:queryParams.status == 2}" @click="switchStatus('在线车辆')">
                <div>在线</div>
                <div>{{ totalInfo.online }}</div>
            </div>
            <div v-if="ConfigSetting.listCate.includes('离线车辆')" class="col" :class="{selected:queryParams.status == 3}" @click="switchStatus('离线车辆')">
                <div>离线</div>
                <div>{{ totalInfo.offline }}</div>
            </div>
            <div v-if="ConfigSetting.listCate.includes('关注车辆')" class="col" :class="{selected:queryParams.status == 4}" @click="switchStatus('关注车辆')">
                <div>关注</div>
                <div>{{ totalInfo.collect }}</div>
            </div>
            <div v-if="ConfigSetting.listCate.includes('停运车辆')" class="col" :class="{selected:queryParams.status == 5}" @click="switchStatus('停运车辆')">
                <div>停运</div>
                <div>{{ totalInfo.outage }}</div>
            </div>
            <div v-if="ConfigSetting.listCate.includes('行驶车辆')" class="col" :class="{selected:queryParams.status == 6}" @click="switchStatus('行驶车辆')">
                <div>行驶</div>
                <div>{{ totalInfo.run }}</div>
            </div>
            <div v-if="ConfigSetting.listCate.includes('熄火车辆')" class="col" :class="{selected:queryParams.status == 7}" @click="switchStatus('熄火车辆')">
                <div>熄火</div>
                <div>{{ totalInfo.stall }}</div>
            </div>
            <!-- <div v-if="ConfigSetting.listCate.includes('警报车辆')" class="col" @click="switchStatus('警报车辆')">
                <div>警报</div>
                <div>{{ totalInfo.alarm }}</div>
            </div> -->
        </div>
        <div class="search-box">
            <el-input class="search-input" v-model="queryParams.queryParam" placeholder="请输入车牌号/设备号/自编号" />
            <img :src="searchBtn" @click="searchCar" />
            <el-popover placement="right" :width="350" :visible="visible">
                <template #reference>
                    <img :src="settingBtn" @click="visible = true" />
                </template>
                <el-form ref="formRef" label-position="top" label-width="100px" :model="form" style="max-width: 460px">
                    <el-form-item label="页面全局设置">
                        <el-checkbox-group v-model="form.global" @change="handleCheckedCitiesChange">
                            <el-checkbox label="只监联网联控车辆" name="gloab" value="122" />
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="车辆选择列表">
                        <el-checkbox-group v-model="form.groupShow">
                            <el-checkbox label="车队显示" name="car" />
                            <el-checkbox label="线路显示" name="line" />
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="列表分类">
                        <!-- 1全部车辆 2在线车辆 3离线车辆 4关注车辆 5停运车辆 6行驶车辆 7停火车辆 -->
                        <el-checkbox-group v-model="form.listCate">
                            <el-checkbox label="全部车辆" name="1" />
                            <el-checkbox label="在线车辆" name="2" />
                            <el-checkbox label="离线车辆" name="3" />
                            <el-checkbox label="关注车辆" name="4" />
                            <el-checkbox label="停运车辆" name="5" />
                            <el-checkbox label="行驶车辆" name="6" />
                            <el-checkbox label="熄火车辆" name="7" />
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item label="车辆显示">
                        <el-checkbox-group v-model="form.carShow">
                            <el-checkbox label="车牌" name="1" />
                            <el-checkbox label="自编号" name="2" />
                            <el-checkbox label="车辆类型" name="3" />
                            <el-checkbox label="驾驶员姓名" name="4" />
                            <el-checkbox label="速度" name="5" />
                            <el-checkbox label="所在区域" name="6" />
                            <el-checkbox label="设备编号" name="7" />
                        </el-checkbox-group>
                    </el-form-item>
                    <el-form-item>
                        <el-button :loading="buttonLoading" size="small" type="primary" @click="submitForm">
                            保存
                        </el-button>
                        <el-button size="small" @click="visible = false">关闭</el-button>
                    </el-form-item>
                </el-form>
            </el-popover>
        </div>
        <el-scrollbar :style="{ height: treeHeight + 'px' }" wrap-class="aaaa" view-class="bbbb">
            <el-tree ref="treeRef" :data="dataSource" node-key="id" :key="treeKey" :expand-on-click-node="false"
                show-checkbox :filter-node-method="filterNode" @node-click="nodeClick" :check-strictly="false"
                :default-expand-all="defaultExpand" :props="defaultProps" @node-contextmenu="nodeContextmenu"
                @check="checkChange">
                <template #default="{ node, data }">
                    <div class="custom-tree-node" :class="{ video: data.type == 'video' }">
                        <div>
                            <img v-if="data.status == 1" :src="offlineImg" />
                            <img v-if="data.status == 5" :src="onlineImg" />
                            <img v-if="data.status == 3" :src="outageImg" />
                            <img v-if="data.status == 4" :src="stopImg" />
                            <img v-if="data.status == 2" :src="waringImg" />
                            {{ data.name }}
                            <span>(车辆{{ typeof data.children != 'undefined' ? data.children.length : 0 }})</span>
                        </div>
                    </div>

                </template>
            </el-tree>
        </el-scrollbar>
        <v-contextmenu ref="contextmenu" theme="bright">
            <v-contextmenu-item>收藏</v-contextmenu-item>
            <v-contextmenu-item>车辆点名</v-contextmenu-item>
            <v-contextmenu-item>车辆点名</v-contextmenu-item>
            <v-contextmenu-item>实时视频</v-contextmenu-item>
            <v-contextmenu-item>视频回放</v-contextmenu-item>
            <v-contextmenu-item>短信下发</v-contextmenu-item>
            <v-contextmenu-item>语音对讲</v-contextmenu-item>
            <v-contextmenu-item>拍摄照片</v-contextmenu-item>
            <v-contextmenu-item>终端信息读取</v-contextmenu-item>
            <v-contextmenu-item>终端参数设置</v-contextmenu-item>
        </v-contextmenu>
    </div>
</template>
<script setup name="carsTree">
import offlineImg from '@/assets/images/safe/offline_small.png'
import onlineImg from '@/assets/images/safe/online_small.png'
import outageImg from '@/assets/images/safe/outage_small.png'
import stopImg from '@/assets/images/safe/stop_small.png'
import waringImg from '@/assets/images/safe/waring_small.png'
import searchBtn from '@/assets/images/safe/search.png'
import settingBtn from '@/assets/images/setting.png'
import scaleBtn from '@/assets/images/safe/scale.png'
const { proxy } = getCurrentInstance();
import { useWindowSize } from '@vueuse/core'
import useVehicleStore from '@/store/modules/vehicle'
import { vehicleTree, vehicleDetail } from '@/api/safety/vehicle.js'
import { detaildPageSetting, addPageSetting, updatePageSetting } from '@/api/basic/userPageSetting.js'
const filterText = ref('')
const treeRef = ref()
const buttonLoading = ref(false)
const { width, height } = useWindowSize();
const treeHeight = ref(0);
const treeKey = ref(new Date().getTime())
console.log(filterText, height)
treeHeight.value = height.value - 200 - 71;
const defaultExpand = ref(false)
const data = reactive({
    form: {
        global: ["只监联网联控车辆"],
        groupShow: [],
        listCate: ['全部车辆', '在线车辆', '离线车辆', '关注车辆'],
        carShow: ['车牌'],

    },
    queryParams: {
        netState: 0, //0禁用 1启用
        route: 0, //是否显示车辆
        fleet: 0, //是否显示车队
        status: 1, //车辆分类 1全部车辆 2在线车辆 3离线车辆 4关注车辆 5停运车辆 6行驶车辆 7停火车辆
        queryParam: ''
    }
});

const { queryParams, form } = toRefs(data);
const configForm = ref();
function handleCheckedCitiesChange(e) {
    console.log('change', e)
}

const visible = ref(false)
const ConfigSetting = ref(form.value);
var configKey = 'treeConfigPage';
async function getConfig() {
    let config = await detaildPageSetting(configKey)
    if (config.data != null) {
        configForm.value = config.data
        ConfigSetting.value = JSON.parse(config.data.content)
        form.value = JSON.parse(config.data.content)
    }
    else {
        ConfigSetting.value = data.form
    }
    searchCar()
}
getConfig();
/** 提交按钮 */
function submitForm() {
    proxy.$refs["formRef"].validate(valid => {
        console.log('form', form.value)
        if (valid) {
            buttonLoading.value = true;
            let parmas = {
                page: configKey,
                content: JSON.stringify(form.value)
            }
            if (typeof configForm.value.id == 'undefined') {
                addPageSetting(parmas).then(res => {
                    proxy.$modal.msgSuccess("保存成功");
                    visible.value = false
                    ConfigSetting.value = JSON.parse(JSON.stringify(form.value))
                }).finally(() => {
                    buttonLoading.value = false;
                });
            } else {
                parmas.id = configForm.value.id;
                updatePageSetting(parmas).then(res => {
                    proxy.$modal.msgSuccess("保存成功");
                    visible.value = false
                    ConfigSetting.value = JSON.parse(JSON.stringify(form.value))
                }).finally(() => {
                    buttonLoading.value = false;
                });
            }
        }
    });
}

function switchStatus(type = '') {
    switch (type) {
        //1全部车辆 2在线车辆 3离线车辆 4关注车辆 5停运车辆 6行驶车辆 7停火车辆
        case '全部车辆':
            queryParams.value.status = 1;
            break;
        case '在线车辆':
            queryParams.value.status = 2;
            break;
        case '离线车辆':
            queryParams.value.status = 3;
            break;
        case '关注车辆':
            queryParams.value.status = 4;
            break;
        case '停运车辆':
            queryParams.value.status = 5;
            break;
        case '行驶车辆':
            queryParams.value.status = 6;
            break;
        case '熄火车辆':
            queryParams.value.status = 7;
            break;
    }
    searchCar()

}

// watch(filterText, (val) => {
//     treeRef.value.filter(val)
// })
function searchCar() {
    treeKey.value = new Date().getTime()
    defaultExpand.value = false;
    if (queryParams.value.queryParam) {
        defaultExpand.value = true;
    }
    vehicleTree(queryParams.value).then(res => {
        console.log(res)
        dataSource.value = res.data
    })
}

const dataSource = ref([
    {
        id: 1,
        name: 'Level one 1',
        type: 'menu',
        children: [
            {
                id: 4,
                name: 'Level two 1-1',
                type: 'menu',
                children: [
                    {
                        id: 9,
                        name: '渝A234234',
                        type: 'car',
                        children: [
                            {
                                id: 15,
                                name: '通道1',
                                type: 'video'
                            },
                            {
                                id: 16,
                                name: '通道2',
                                type: 'video'
                            },
                        ],
                    },
                    {
                        id: 10,
                        name: '111111',
                        type: 'car',
                        children: [
                            {
                                id: null,
                                name: '',
                                type: 'diy'
                            }
                        ],
                    },
                ],
            },
        ],
    },
    {
        id: 2,
        name: 'Level one 2',
        children: [
            {
                id: 5,
                name: 'Level two 2-1',
            },
            {
                id: 6,
                name: 'Level two 2-2',
            },
        ],
    },
    {
        id: 3,
        name: 'Level one 3',
        children: [
            {
                id: 7,
                name: 'Level two 3-1',
            },
            {
                id: 8,
                name: 'Level two 3-2',
            },
        ],
    },
])
const defaultProps = reactive({
    disabled: function (data, node) {
        if (data.type === 'video') {
            return !data.leaf
        }
    }
})
function remove(data) {
    console.log('nodedata', data)
}
function nodeClick(data) {
    console.log('click', data)
    contextmenu.value.hide()
}

function checkChange(data) {
    console.log('data', data)
    console.log(treeRef.value.getCheckedNodes())
}

function nodeContextmenu(event, data) {
    console.log('nodeContextmenu', data)
    //     ClickRow.value = row
    //   isMenu.value = true
    contextmenu.value.show({ left: event.pageX, top: event.pageY })
}
const contextmenu = ref('')

// 车辆统计
const totalInfo = ref({})
const store = useVehicleStore()
function carsTotal() {
    store.vehicleCollect().then(res => {
        totalInfo.value = res
    })
}
carsTotal()

</script>

